<template>
    <div>
        <h1>问题反馈</h1>
        <br/><br/>
           <div class="ll-1">
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                    <FormItem label="姓名" prop="name">
                        <Input v-model="formValidate.name" placeholder="（必填）请输入姓名"></Input>
                    </FormItem>
                    <FormItem label="邮箱" prop="email" >
                        <Input v-model="formValidate.email" placeholder="请输入电子邮箱"></Input>
                    </FormItem>
                    <FormItem  label="联系电话" prop="phone">
                    <Input  v-model="formValidate.phone" placeholder="请输入手机号码"></Input>
                    </FormItem>               
                    <FormItem label="反馈内容" prop="content">
                        <Input v-model="formValidate.content" type="textarea" :autosize="{minRows: 4,maxRows: 5}" placeholder="(必填)请输入您的反馈内容..."></Input>
                    </FormItem>
                    <FormItem label="验证码" prop="validate_code">
                        <Row>
                            <Col span="18">
                                <Input v-model="formValidate.validate_code" placeholder="请输入验证码"></Input>
                            </Col>
                            <Col span="5">
                                <img :src="image" alt="验证码" height="30" style="cursor: pointer;margin-left:10px" title="看不清可单击图片刷新" @click="getValidateCode"></img>
                            </Col>                            
                        </Row>
                    </FormItem>       
                    <FormItem class="ll-2">
                        <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                        <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                    </FormItem>
                </Form>
                <Modal v-model="madal" width="500">
                    <p slot="header" style="color:#495060;text-align:center">
                        <Icon type="checkmark-round"></Icon>
                        <span>提交成功</span>
                    </p>
                    <div style="text-align:">
                        <p style="font-size:15px;text-align:center">感谢您的反馈！</p>
                        <p style="font-size:15px;text-align:center">工作人员将尽快与您联系，请务必保持通信畅通。</p><br>
                        <p style="font-size:15px;color:blue;text-align:center"><span style="font-size:18px;color:red">{{count}}</span>秒后返回首页...快速返回请点击“返回首页”</p>
                    </div>
                    <div slot="footer">
                        <Button type="primary" size="large"   @click="$router.push({name:'index'})">返回首页</Button>
                    </div>
                </Modal>
         </div>

    </div>
</template>
<script>
    import Cookies from 'js-cookie';
    export default {
        data () {
            return {
                timer:null,
                count :'',
                image: '',
                madal: false,
                formValidate: {
                    name: '', 
                    userName:'',
                    email:'',
                    phone:'',
                    content: '',
                    validate_code: '',
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    email:[                   
                        { type: 'email', message: '邮箱格式错误', trigger: 'blur' }                   
                    ],
                    content: [
                        { required: true, message: '反馈不能为空', trigger: 'blur' },
                        { type: 'string', min: 10, message: '反馈内容不得小于10个字', trigger: 'blur' }
                    ],
                    validate_code: [
                        { required: true, message: '验证码不能为空', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            getValidateCode(){
                this.api.post("member/validate_code",{},res=>{
                this.image=res.value;
                })
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.api.post("feedback/send", this.formValidate, res => {
                            if(!res.value) {
                                this.$Notice.error({
                                    title: res.message,
                                    desc: '请正确输入图片所示的验证码（不区分大小写），可点击图片重新获取',
                                    duration: 5,
                                });                              
                            }
                            else{
                                this.madal = true;                       
                                const TIME_COUNT = 6;
                                if (!this.timer) {
                                    this.count = TIME_COUNT;
                                    this.timer = setInterval(() => {
                                        if (this.count > 0 && this.count <= TIME_COUNT) {
                                            this.count--;
                                            } else {
                                            this.$router.push({name:'index'});
                                            clearInterval(this.timer);
                                            this.timer = null;
                                            }
                                        }, 1000)
                                    }                               
                                //setTimeout(() => this.$router.push({name:'index'}),5000);
                            }
                        });
                    }
                    else {
                        this.$Notice.error({
                            title: res.message,
                            desc: '提交失败！您所输入的信息有误，请仔细核对后重新提交',
                            duration: 4,
                        });   
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        },
        created(){
            // console.log(this.$store.state.user.info);
            // console.log(this.$store.state.user.info.id);
            // if(Cookies.get('access') != "member"){
            //     this.$Modal.confirm({
            //         title: '您尚未登录，请登录后重新进行反馈',
            //         okText:'登录',
            //         content: '<p>继续反馈，请点击登录前往用户登录页面</p><br><p>取消，请点击取消按钮</p>',
            //         onOk: () => {
            //             this.$router.push({name:'login'});
            //         },
            //         onCancel: () => {
            //             this.$router.push({name:'index'});
            //         }
            //     });     
            // }
            // else
            // {
                this.api.post("member/validate_code",{},res=>{
                    this.image=res.value;
                });
                this.formValidate.userName = Cookies.get('membername');
                console.log("membername : " + Cookies.get('membername'));
            //}
        }
    }
</script>
<style>
    .ll-1{
        position:relative;
        width: 60%;
        margin-right: 15%;
        margin-left: 15%;
        margin-bottom: 5%;
    }
    .ll-2{
        position:relative;
        left:30%;
    }
 </style>
